<template>
	<public-view navType="other" navTitle="领取详情">
		<view class="content">
			<view class="code-box all-center f-s-28 f-w-b">
				核销码：{{gift_info.code ||""}}
			</view>
			<view class="thumb-title f-w-b color-333 f-s-30">
				附近门店
			</view>
			<block v-for="(item, index) in store_list" :key="index">
				<view class="store-item-box flex f-d-c" @click="goTo({url:'/pages/store/index?id='+item.id})">
					<view class="item-top-box flex a-i-c j-c-b">
						<view class="left flex a-i-c color-7a7a7a f-s-30">
							<image class="icon" src="@/static/images/gift-store-333.svg" mode=""></image>
							{{item.name||""}}
						</view>
						<view class="right flex a-i-c color-2567F3 f-s-24">
							<image class="location-icon" src="@/static/images/my/blue-location.svg" mode=""></image>
							{{item.distance||0}}km
						</view>
					</view>
					<view class="time-and-locaiton-box w-100 flex f-d-c f-s-24 color-999">
						<view class="flex a-i-c item">
							<image class="icon" src="@/static/images/circle/location-icon.svg" mode=""></image>
							{{item.province_text||"" + item.city_text||"" + item.area_text||"" + item.detail_address||"" }}
						</view>
						<view class="flex a-i-c item">
							<image class="icon" src="@/static/images/circle/send-time-icon.svg" mode=""></image>
							营业时间：{{ openTime(item)}}
						</view>
					</view>
					<view class="operate-box f-s-24 flex a-i-c">
						<view class="item bg1 all-center" @click.stop="$callPhone(item.principal_phone)">
							<image class="phone-icon" src="@/static/images/my/store-phone-icon.svg" mode=""></image>
							打电话
						</view>
						<view class="item bg2 all-center" @click.stop="$location.openMapLocation(item.lat,item.lng)">
							<image class="phone-icon" src="@/static/images/my/store-map-icon.svg" mode=""></image>
							到这去
						</view>
					</view>
				</view>
			</block>
		</view>
	</public-view>
	
</template>

<script>
	import {goTo} from "@/nav.js"
	export default {
		data() {
			return {
				gift_info:{},
				gift_id:"",
				lat:"",
				lng:"",
				store_list:[]
			};
		},
		onLoad(o) {
			console.log(o)
			this.gift_id = o.id
			this.geTQrInfo()
		},
		methods:{
			goTo,
			openTime(item){
				const chineseNumbers = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				let arr = [],str=""
				item.business_time.weeks.map(val=>{
					arr.push(chineseNumbers[val])
				})
				str =`${arr.toString()} ${item.business_time.start}-${item.business_time.end}`
				return str
			},
			geTQrInfo(){
				let that = this
				that.util.postRequest({
					url:"v1/goods_gift_user/info",
					data:{
						id:that.gift_id
					}
				}).then(res=>{
					console.log(res)
					Object.freeze(that.gift_info = res.data)
					that.$location.myGetLocation((lres)=>{
						console.log(lres)
						that.lat = lres.lat
						that.lng = lres.lng
						that.getStoreList()
					},false)
				})
			},
			getStoreList(){
				let that = this
				that.util.postRequest({
					url:"v1/goods_gift_user/merchant",
					data:{
						lng:that.lng,
						lat:that.lat,
						id:that.gift_id
					}
				}).then(res=>{
					console.log(res)
					Object.freeze(that.store_list = res.data.data)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.store-item-box{
		width: 100%;
		margin-bottom: 32upx;
		background: #FFFFFF;
		border-radius: 16upx;
		padding: 30upx 52upx;
		.operate-box{
			width: 100%;
			.item{
				border-radius: 8upx;
				margin-right: 12upx;
				width: 184upx;
				height: 58upx;
				.phone-icon{
					width: 24upx;
					height: 24upx;
					margin-right: 16upx;
				}
			}
			.bg1{
				background: #F1F5FE;
				border: 1upx solid #2567F3;
				color: #2567F3;
				
			}
			.bg2{
				background: #2567F3;
				color: #FFFFFF;
				
			}
		}
		.time-and-locaiton-box{
			margin-bottom: 20upx;
			.item{
				margin-bottom: 10upx;
				.icon{
					width: 26upx;
					height: 26upx;
					margin-right: 4upx;
					
				}
			}
		}
		.item-top-box{
			width: 100%;
			margin-bottom: 20upx;
			.right{
				.location-icon{
					width: 24upx;
					height: 24upx;
					margin-right: 4upx;
				}
			}
			.left{
				.icon{
					width: 40upx;
					height: 40upx;
					margin-right: 16upx;
				}
			}
		}
	}
	.code-box{
		width: 100%;
		height: 176upx;
		background-color: #FFFFFF;
		border-radius: 16upx;
		margin-bottom: 32upx;
	}
	.thumb-title{
		padding-left: 36upx;
		margin-bottom: 24upx;
	}
	.content{
		width: 750upx;
		padding: 34upx 24upx;
	}
</style>
